<html>

<head>
    <title>总体布局示例</title>
    <style>
        body {
            margin: 0;
        }

        .wrapper {
            width: 95%;
            max-width: 76em;
            margin: 0 auto;
            overflow: hidden;
        }

        .masthead {
            background-color: dimgray;
            color: white;
        }

        .navbar {
            background-color: rgb(63, 63, 63);
            color: rgb(204, 203, 203);
        }

        .navlist li {
            display: block;
            float: left;
        }

        .navlist::after {
            content: '';
            display: block;
            clear: both;
            height: 0;
        }

        .row {
            display: flex;
            margin: 0 -.6875rem;
        }

        .row-wrapping {
            flex-wrap: wrap;
        }

        .row-quartet>* {
            width: 25%;
        }

        .row-trio>* {
            width: 33.3333%;
        }

        .col {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding: 0 .6875em 1.375em;
        }

        .col>* {
            flex: 1;
        }


        .subcategory {
            margin-top: .6875em;
        }

        .subcategory-content {
            width: 80%;
        }

        .subcategory-header {
            width: 20%;
        }

        .subcategory-featured {
            width: 50%;
        }

        .story {
            padding: .6875em;
            background-color: #eee;
        }

        .story+.story {
            margin-top: 1.375em;
        }

        .story img {
            width: 100%;
        }
    </style>
</head>

<body>
    <header class="masthead">
        <div class="wrapper">
            <h1>Important News</h1>
        </div>
    </header>
    <nav role="navigation" class="navbar">
        <div class="wrapper">
            <ul class="navlist">
                <li><a href="/">Home</a></li>
                <li><a href="/World">World</a></li>
                <li><a href="/Local">Local</a></li>
                <li><a href="/Sports">Sports</a></li>
            </ul>
        </div>
    </nav>
    <main class="wrapper">
        <section class="subcategory">
            <div class="row">
                <header class="col subcategory-header">
                    <h2>Lorem ipsum</h2>
                </header>
                <div class="col subcategory-content">
                    <div class="row row-quartet">
                        <div class="col subcategory-featured">
                            <article class="story">
                                <img src="https://via.placeholder.com/600x300" alt="Dummy image">
                                <h3>Cras suscriptic nec leo id.</h3>
                                <p>Autem repudiandae 测试内容，测试内容，测试内容，测试内容，测试内容，测试内容，测试内容</p>
                            </article>
                        </div>
                        <div class="col">
                            <article class="story">
                                <img src="https://via.placeholder.com/600x300" alt="Dummy image">
                                <h3>Cras suscriptic nec leo id.</h3>
                                <p>Autem repudiandae 测试内容，测试内容，测试内容，测试内容，测试内容，测试内容，测试内容</p>
                            </article>
                        </div>
                        <div class="col">
                            <article class="story">
                                <img src="https://via.placeholder.com/600x300" alt="Dummy image">
                                <h3>Cras suscriptic nec leo id.</h3>
                                <p>Autem repudiandae 测试内容，测试内容，测试内容，测试内容，测试内容，测试内容，测试内容</p>
                            </article>
                        </div>
                    </div>
                    <div class="row row-quartet">
                        <div class="col">
                            <article class="story">
                                <h3>Cras suscriptic nec leo id.</h3>
                                <p>Autem repudiandae 测试内容，测试内容，测试内容，测试内容，测试内容，测试内容，测试内容</p>
                            </article>
                        </div>
                        <div class="col">
                            <article class="story">
                                <h3>Cras suscriptic nec leo id.</h3>
                                <p>Autem repudiandae 测试内容，测试内容，测试内容，测试内容，测试内容，测试内容，测试内容</p>
                            </article>
                        </div>
                        <div class="col">
                            <article class="story">
                                <h3>Cras suscriptic nec leo id.</h3>
                                <p>Autem repudiandae 测试内容，测试内容，测试内容，测试内容，测试内容，测试内容，测试内容</p>
                            </article>
                        </div>
                        <div class="col">
                            <article class="story">
                                <h3>Cras suscriptic nec leo id.</h3>
                                <p>Autem repudiandae 测试内容，测试内容，测试内容，测试内容，测试内容，测试内容，测试内容</p>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="subcategory">
            <div class="row">
                <header class="col subcategory-header">
                    <h2>Dolor sit amet</h2>
                </header>
                <div class="col subcategory-content">
                    <div class="row row-trio row-wrapping">
                        <div class="col">
                            <article class="story">
                                <img src="https://via.placeholder.com/600x300" alt="Dummy image">
                                <h3>Cras suscriptic nec leo id.</h3>
                                <p>Autem repudiandae 测试内容，测试内容，测试内容，测试内容，测试内容，测试内容，测试内容</p>
                            </article>
                        </div>
                        <div class="col">
                            <article class="story">
                                <h3>Cras suscriptic nec leo id.</h3>
                                <p>Autem repudiandae 测试内容，测试内容，测试内容，测试内容，测试内容，测试内容，测试内容</p>
                            </article>
                            <article class="story">
                                <h3>Cras suscriptic nec leo id.</h3>
                                <p>Autem repudiandae 测试内容，测试内容，测试内容，测试内容，测试内容，测试内容，测试内容</p>
                            </article>
                        </div>
                        <div class="col">
                            <article class="story">
                                <img src="https://via.placeholder.com/600x300" alt="Dummy image">
                                <h3>Cras suscriptic nec leo id.</h3>
                                <p>Autem repudiandae 测试内容，测试内容，测试内容，测试内容，测试内容，测试内容，测试内容</p>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
</body>

</html>